<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      href="/favicon.ico"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      href="/assets/preloader.css"
      rel="stylesheet"
    />
    <title>%VITE_APP_TITLE%</title>
  </head>
  <body>
    <div id="appLoader">
      <div id="clock"></div>
    </div>
    <div id="app"></div>
    <script>
      document.documentElement.classList.toggle(
        'dark',
        localStorage.getItem('theme-mode') === 'dark' ||
          (!localStorage.getItem('theme-mode') &&
            window.matchMedia('(prefers-color-scheme: dark)').matches),
      )
      window.loaderElement = document.getElementById('appLoader')
      window.loaderElement.style = `--clock-color: ${localStorage.getItem('theme-color') || '#8e51ff'}`
    </script>
    <script
      type="module"
      src="/src/main.ts"
    ></script>
  </body>
</html>
